<script setup lang="ts">
import {ref} from 'vue'
import OrderList from '@/pagesOrder/list/compoents/OrderList.vue'

// tabs 数据
const orderTabs = ref([
  {orderState: -1, title: '全部'},
  {orderState: 0, title: '待付款'},
  {orderState: 20, title: '已过期'},
  // {orderState: 40, title: '已取消'},
  {orderState: 60, title: '待收货'},
  {orderState: 100, title: '已完成'},
])
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState == Number(query.type)))
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text class="item" v-for="(item, index) in orderTabs" :key="index" @tap="activeIndex = index">
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item  v-for="item in orderTabs" :key="item.title">
<!--        <scroll-view scroll-y="true">-->
          <order-list :order-state="item.orderState"
                      v-if="orderTabs[activeIndex].orderState == item.orderState"></order-list>
<!--        </scroll-view>-->
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
page {
  height: 100%;

  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    //background-color: orangered;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
  height: calc(100vh - 100rpx);
}
</style>
